import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'

import { AtIcon, AtInput, AtSearchBar } from 'taro-ui'
import { CSkeleton } from '@/components'
import { View, Image, Text } from '@tarojs/components'
import logo from '@/assets/home_logo.png'

interface IHomeSearch {
  loading: boolean
}

/**  首页 搜索框  */
function HomeSearch(params: IHomeSearch) {
  const { loading = true } = params

  const [searchVal, setSearchVal] = useState('') // 搜索的内容

  function gotoPage(searchVal) {
    Taro.navigateTo({
      url: '/pages/QueryResult/index?type=test',
    })
  }
  return (
    <View className='search-content'>
      {loading && <CSkeleton width={325} height={44} />}
      {!loading && (
        <View className='search_row'>
          <View className='search_logo'>
            <Image src={logo} />
            <Text>悦心理</Text>
          </View>
          <View className='search_input' onClick={gotoPage}>
            {/* <AtSearchBar
              actionName=''
              value={searchVal}
              placeholder='请输入测试名称或关键字'
              onChange={setSearchVal}
              onClear={() => {
                setSearchVal('')
              }}
              onActionClick={() => {
                gotoPage(searchVal)
              }}
            /> */}
            <AtIcon value='search' size='22' color='#fff'></AtIcon>
            <View className='search_text'>搜索</View>
            {/* <AtInput
              name='key'
              type='text'
              placeholder='搜索'
              value={searchVal}
              onChange={(value) => {
                setSearchVal(value)
              }}
              onFocus={gotoPage}
            /> */}
          </View>
        </View>
      )}
    </View>
  )
}

export default React.memo(HomeSearch)
